import React, { Component } from 'react';
import { AvailableAssetC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button } from 'antd';

class AvailableAssetCTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      p3: '28bfc1416fadb919016fb1480551005e',
    };

    setTimeout(() => {
      this.setState({
        p4: '28bfc1416fadb919016fb1480551005e',
      });
    }, 2000);
  }

  onChange1 = (e) => {
    console.log('有数据', e);
  };

  onChange2 = (e) => {
    console.log('无数据', e);
  };

  onChange3 = (e) => {
    console.log('同步数据', e);
  };

  onChange4 = (e) => {
    console.log('异步数据', e);
  };
  onChange5 = (e) => {
    console.log('undefined', e);
  };
  Change1 = () => {
    this.setState({
      p4: '28bfc1416fadb919016fb1480551005e',
    });
  };

  Change2 = () => {
    this.setState({
      p4: '9e23ea5e5b494948b0f923705dd2887b',
    });
  };

  Change3 = () => {
    this.setState({
      p4: undefined,
    });
  };

  render() {
    return (
      <div>
        <div>无请求展示</div>
        <Form>
          <AvailableAssetC />
        </Form>
        <div>无数据展示</div>
        <Form>
          <AvailableAssetC portfolio='9e23ea5e5b494948b0f923705dd2887b' onChange={this.onChange2} />
        </Form>
        <div>入参underfind</div>
        <Form>
          <AvailableAssetC portfolio={undefined} onChange={this.onChange5} />
        </Form>
        <div>有数据展示</div>
        <Form>
          <AvailableAssetC
            portfolio='28bfc1416fadb919016fb1480551005e'
            onChange={this.onChange1}
            // width={'300px'}
          />
        </Form>
        <div>同步数据展示</div>
        <Form>
          <AvailableAssetC
            portfolio={this.state.p3}
            onChange={this.onChange3}
            // width={'300px'}
          />
        </Form>
        <div>同时传productGroupId（产品组id）和portfolio（组合id）,显示蒙版</div>
        <Form>
          <AvailableAssetC
            portfolio='28bfc1416fadb919016fb1480551005e'
            productGroupId='155'
            type={'1'}
            onChange={this.onChange1}
            // width={'300px'}
          />
        </Form>
        <div>根据productGroupId（产品组id）查询资金可用信息</div>
        <Form>
          <AvailableAssetC
            productGroupId='155'
            type={'12'}
            onChange={this.onChange1}
            // width={'300px'}
          />
        </Form>
        <div>港股通模式</div>
        <Form>
          <AvailableAssetC
            portfolio='28bfc1416fadb919016fb1480551005e'
            onChange={this.onChange1}
            hkType={'2'}
            // width={'300px'}
          />
        </Form>
        <div>异步数据展示</div>
        <Form>
          <AvailableAssetC
            portfolio={this.state.p4}
            onChange={this.onChange4}
            // width={'300px'}
          />
          <Button onClick={this.Change1}>点我有数据</Button>
          <Button onClick={this.Change2}>点我无数据</Button>
          <Button onClick={this.Change3}>点我重置，不传参数</Button>
        </Form>
      </div>
    );
  }
}

export default Form.create()(AvailableAssetCTest);
